<template>
  <div style="padding: 20px 0">
    <div style="width: 1200px;margin: 0 auto">
      <!-- 查询表单 -->
      <div class="query-field">
        <el-form :inline="true" :model="queryRestaurant" class="query-form">
          <div class="query-field-left">
            <el-form-item label="餐厅名称">
              <el-input
                v-model="queryRestaurant.name"
                placeholder="请输入餐厅名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="城市">
              <el-input
                v-model="queryRestaurant.city"
                placeholder="请输入城市"
                clearable
              />
            </el-form-item>
          </div>
          <div class="query-field-right">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 餐厅卡片列表 -->
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="restaurant in restaurantList"
          :key="restaurant.id"
        >
          <div class="restaurant-card">
            <!-- 图片部分 -->
            <div
              class="restaurant-image"
              :style="{backgroundImage: `url(${restaurant.image})`}"
            >
              <!-- 价格标签，如果有的话，也可以放这里，看需求 -->
              <div class="price-tag" v-if="restaurant.price">
                ¥{{ restaurant.price }}/人均
              </div>
            </div>
            <!-- 内容部分 -->
            <div class="card-content">
              <h3 class="restaurant-name">{{ restaurant.name }}</h3>
              <div class="location">
                <i class="el-icon-location"></i>
                <span>{{ restaurant.address }}</span>
              </div>
              <p class="brief">{{ restaurant.description }}</p>
              <el-button
                class="detail-btn"
                type="primary"
                @click="viewDetail(restaurant.id)"
              >查看详情</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 餐厅详情弹窗 -->
    <vxe-modal
      v-model="detailVisible"
      :title="currentRestaurant.name"
      width="70%"
      show-footer
      esc-closable
      show-zoom
      resize
    >
      <div style="padding: 10px">
        <el-row :gutter="20">
          <el-col :span="16">
            <img
              :src="currentRestaurant.image"
              alt="餐厅图片"
              style="width: 100%;height: 100%;border-radius: 4px;"
            >
          </el-col>
          <el-col :span="8">
            <div style="padding: 0 15px">
              <div style="font-size: 24px;margin-top: 0">{{ currentRestaurant.name }}</div>
              <div>
                <i style="margin-right: 5px;margin-top: 10px" class="el-icon-location"></i>
                <span>{{ currentRestaurant.address }}</span>
              </div>
              <div style="margin: 20px 0;color: #666;line-height: 1.6">
                <p>{{ currentRestaurant.description }}</p>
              </div>

              <div>
                <div style="margin: 20px 0;color: #666;font-size: 18px">营业状态</div>
                <p>{{ currentRestaurant.status }}</p>
              </div>

              <div>
                <div style="margin: 20px 0;color: #666;font-size: 18px">人均消费</div>
                <p style="color: #d6610f;font-weight: bold">￥{{ currentRestaurant.price }}</p>
              </div>
                <div>
                  <div style="margin: 20px 0;color: #666;font-size: 18px">附近酒店</div>
                  <div style="margin-top: 10px;">
                    <div
                      class="homestay-item"
                      v-for="(homestay, index) in nearByHomestays"
                      :key="index"
                      @click="goToHotelDetail(homestay.homestayId)"
                    >
                      <!-- 修复图片显示问题 -->
                      <img
                        :src="homestay.image"
                        style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; margin-right: 15px;"
                      >
                      <div style="flex: 1;">
                        <p style="font-weight: 500; margin-bottom: 5px;">{{ homestay.title }}</p>
                        <p style="font-size: 13px; color: #666; margin-bottom: 8px;">
                          <i class="el-icon-location"></i> {{ homestay.location }}
                        </p>
                        <p style="color: #d6610f;font-weight: bold">
                          ￥{{ homestay.price }}起
                        </p>
                      </div>
                    </div>

                    <!-- 添加空状态提示 -->
                    <div v-if="nearByHomestays.length === 0" style="color: #999; text-align: center; padding: 20px;">
                      暂无附近酒店信息
                    </div>
                  </div>
                </div>
            </div>
          </el-col>
        </el-row>
        <!-- 酒店详情 -->
        <RoomReservation ref="roomReservation" />
      </div>
    </vxe-modal>
  </div>
</template>

<script>
import { listRestaurant, getRestaurant } from "@/api/huacai/restaurant";
import {formatImageUrl} from '@/utils/format'
// 使用正确的酒店API
import { selectHomestayByRestaurantId } from "@/api/huacai/homestay";
import RoomReservation from "@/views/components/RoomReservation/index.vue";

export default {
  name: "RestaurantList",
  components: { RoomReservation },
  data() {
    return {
      restaurantList: [], // 餐厅列表
      currentRestaurant: {}, // 当前餐厅详情
      detailVisible: false,// 详情弹窗是否显示
      nearByHomestays: [],//附近酒店列表
      queryRestaurant: {
        name: "", // 餐厅名称
        city: "" // 地址
      }
    };
  },
  created() {
    this.getRestaurantList();
  },
  methods: {
    // 获取餐厅列表
    async getRestaurantList() {
      try {
        const response = await listRestaurant(this.queryRestaurant);
        console.log("response:",response);
        this.restaurantList = response.rows.map(item => ({
          ...item,
          // 统一拼接逻辑
          image: formatImageUrl(item.image),
          tags: item.tags ? item.tags.split(",") : []
        }));
      } catch (error) {
        console.error("获取餐厅列表失败:", error);
        this.$message.error("获取餐厅列表失败");
      }
    },

    // 查看餐厅详情
    async viewDetail(id) {
      try {
        const response = await getRestaurant(id);
        this.currentRestaurant = {
          ...response.data,
          // 统一拼接逻辑
          image: formatImageUrl(response.data.image),
          tags: response.data.tags ? response.data.tags.split(",") : []
        };
        this.detailVisible = true;

        // 获取附近酒店
        await this.getNearbyHotels(id);
      } catch (error) {
        console.error("获取餐厅详情失败:", error);
        this.$message.error("获取餐厅详情失败");
      }
    },
    // 新增：获取附近酒店
    async getNearbyHotels(restaurantId) {
      try {
        const response = await selectHomestayByRestaurantId(restaurantId);
        console.log("res = ",response);
        this.nearByHomestays = (response.data || []).map(hotel => ({
          ...hotel,
          image: process.env.VUE_APP_BASE_API + hotel.image
        }));
      } catch (error) {
        console.error("获取附近酒店失败:", error);
        this.$message.error("获取附近酒店失败");
        this.nearByHomestays = [];
      }
    },
    // 新增：跳转到酒店详情
    goToHotelDetail(hotelId) {
      console.log("hotelId = ",hotelId);
      console.log(this.$refs.roomReservation);
      this.$refs.roomReservation.handleOpen(hotelId);
    },

    // 查询
    handleQuery() {
      this.getRestaurantList();
    },

    // 重置查询
    resetQuery() {
      this.queryRestaurant = {
        name: "",
        city: "",
        address: ""
      };
      this.getRestaurantList();
    }
  }
};
</script>

<style scoped lang="scss">
/* 通用布局调整 */
.query-field {
  margin-bottom: 20px;
}
.query-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.query-field-left {
  display: flex;
  gap: 20px;
}
.query-field-right {
  display: flex;
  gap: 10px;
}

/* 餐厅卡片整体样式 */
.restaurant-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  background-color: #fff;
}
.restaurant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 图片区域 */
.restaurant-image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat; /* 新增，避免图片重复 */
  background-color: #f0f0f0; /* 新增，加载失败时显示占位色 */
}

/* 价格标签 */
.price-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}

/* 卡片内容区域 */
.card-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 餐厅名称 - 单行显示，超出省略号 */
.restaurant-name {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地址信息 - 单行显示，超出省略号 */
.location {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location i {
  margin-right: 4px;
  color: #999;
}

/* 简介文字 - 单行显示，超出省略号 */
.brief {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 查看详情按钮 */
.detail-btn {
  width: 100%;
  margin-top: auto; /* 让按钮靠底部 */
}
</style>
